<!DOCTYPE html>
<html>
<head>
    <:include file="../common/css.html" title="通讯录"/>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card card-box-shadow">
    	<div class="layui-card-body">
    	    <!-- 表格工具栏 -->
	        <form class="layui-form toolbar" lay-filter="phoneBookTbSearchForm">
	            <div class="layui-form-item">
	                <div class="layui-inline">
	                    <label class="layui-form-label w-auto">名称：</label>
	                    <div class="layui-input-inline mr0">
	                        <input name="name" class="layui-input search_key" type="search" placeholder="名称"/>
	                    </div>
	                </div>
	                <div class="layui-inline">
	                    <button class="layui-btn icon-btn" lay-filter="phoneBookTbSearch" id="phoneBookTbSearch" lay-submit>
	                        <i class="layui-icon">&#xe615;</i>搜索
	                    </button>
	                </div>
	            </div>
	        </form>
	        <!-- 数据表格 -->
        	<table id="phoneBookTable" lay-filter="phoneBookTable"></table>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="phoneBookTbBar">
	<% if(so.hasPermission("oa:phoneBook:update")){ %>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <% } %>
    <% if(so.hasPermission("oa:phoneBook:remove")){ %>
    <a class="layui-btn layui-btn-danger layui-btn-xs"
       data-dropdown="#phoneBookTbDelDrop{{d.LAY_INDEX}}" no-shade="true">删除</a>
    <% } %>
    <div class="dropdown-menu-nav dropdown-popconfirm dropdown-top-right layui-hide"
         id="phoneBookTbDelDrop{{d.LAY_INDEX}}"
         style="max-width: 200px;white-space: normal;min-width: auto;margin-left: 10px;">
        <div class="dropdown-anchor"></div>
        <div class="dropdown-popconfirm-title">
            <i class="layui-icon layui-icon-help"></i>
            确定要删除{{d.name}}吗？
        </div>
        <div class="dropdown-popconfirm-btn">
            <a class="layui-btn" btn-cancel>取消</a>
            <a class="layui-btn layui-btn-normal" lay-event="del">确定</a>
        </div>
    </div>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="phoneBookEditDialog">
    <form id="phoneBookEditForm" lay-filter="phoneBookEditForm" class="layui-form model-form">
        <input name="id" id="id" type="hidden"/>
        <input name="organizationId" type="hidden"/>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md4">
                <label class="layui-form-label layui-form-required">姓名</label>
                <div class="layui-input-block">
                   <input id="name" name="name" type="text" class="layui-input" autocomplete="off"
                   lay-verType="tips" lay-verify="required" placeholder="请输入姓名"/>
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label layui-form-required">电话</label>
                <div class="layui-input-block">
                   <input id="phone" name="phone" type="text" class="layui-input" autocomplete="off"
                   lay-verType="tips" lay-verify="required" placeholder="请输入电话"/>
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label layui-form-required">生日</label>
                <div class="layui-input-block">
                    <input id="birthday" name="birthday"  type="text" class="layui-input" placeholder="yyyy-MM-dd" autocomplete="off" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md4">
                <label class="layui-form-label layui-form-required">工种</label>
                <div class="layui-input-block">
                    <select name="position" xm-select="position" lay-verType="tips" placeholder="请输入工种" lay-verify="required">
                        <:for items="${bookPositionList}" var="item">
                            <option value="${item.dictDataCode}">${item.dictDataName}</option>
                        </:for>
                    </select>
                </div>
            </div>
            <!--<div class="layui-col-md4">
                <label class="layui-form-label layui-form-required">状态</label>
                <div class="layui-input-block">
                   <input id="state" name="state" type="text" class="layui-input" autocomplete="off"
                   lay-verType="tips" lay-verify="" placeholder="请输入状态"/>
                </div>
            </div>-->

        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md8">
                <label class="layui-form-label ">备注</label>
                <div class="layui-input-block">
                    <textarea id="remark" name="remark" placeholder="请输入备注" class="layui-textarea" autocomplete="off"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="phoneBookEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<:include file="../common/js.html"/>
<script type="text/javascript">
layui.use(['layer', 'form', 'table', 'tableX', 'util', 'admin','xmSelect','formX','dropdown','laydate'], function () {
let $ = layui.jquery;
let layer = layui.layer;
let form = layui.form;
let table = layui.table;
let tableX = layui.tableX;
let util = layui.util;
let admin = layui.admin;
let formX = layui.formX;
let xmSelect = layui.xmSelect;
let laydate = layui.laydate;

// 渲染表格
let insTb = tableX.render({
    elem: '#phoneBookTable'
    ,url: 'phoneBook/page'
    ,page: true
    ,height: 'full-100'
    ,limits: [10,20,30,50,80,100,200]
    ,limit: 20 //每页默认显示的数量
    ,toolbar: ['<p>',
        <% if(so.hasPermission("oa:phoneBook:save")){ %>
        '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
        <% } %>
        <% if(so.hasPermission("oa:phoneBook:remove")){ %>
        '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
        <% } %>
        '</p>'].join('')
    ,cellMinWidth: 100
    ,cols: [[
        {type: 'checkbox'}
        ,{type: 'numbers'}
        ,{field: "name",  title: "姓名", sort: true, hide:false }
        ,{field: "phone",  title: "电话", sort: true, hide:false }
        ,{field: "birthday",  title: "生日", sort: true, hide:false }
        ,{field: "position",  title: "工种", sort: true, hide:false }
        ,{field: "state",  title: "状态", sort: true, hide:true }
        ,{field: "remark",  title: "备注", sort: true, hide:true }
        ,{field: "createTime",  title: "创建时间", sort: true, hide:true ,templet: function (d) {
                return util.toDateString(d.createTime);
            }
        }
        ,{field: "createUser",  title: "创建人", sort: true, hide:true }
        ,{title: '操作', toolbar: '#phoneBookTbBar', align: 'center', minWidth: 200, fixed: 'right'}
    ]]
});

//监听行双击
table.on('rowDouble(phoneBookTable)', function(obj){
    let data = obj.data;
    showEditModel(data);
    // obj.tr.find("a[lay-event=edit]").trigger("click");//会跳出来两个一样的框 这个不好用
    //obj.tr.toggleClass('layui-table-click').siblings().removeClass('layui-table-click');//选中行
});


// 搜索
form.on('submit(phoneBookTbSearch)', function (data) {
    insTb.reload({where: data.field, page: {curr: 1}});
    return false;
});

$('.search_key').bind('keypress',function(event){
    if(event.keyCode == "13")
    {
        $("#phoneBookTbSearch").click();
    }
});

// 工具条点击事件
table.on('tool(phoneBookTable)', function (obj) {
    if ('edit' === obj.event) { // 修改
        showEditModel(obj.data);
    } else if ('del' === obj.event) { // 删除
        doDel(obj);
    }
});

/* 表格头工具栏点击事件 */
table.on('toolbar(phoneBookTable)', function (obj) {
    if ('add' === obj.event) { // 添加
        showEditModel();
    } else if ('del' === obj.event) { // 删除
        let checkRows = table.checkStatus('phoneBookTable');
        if (!checkRows || !checkRows.data || 0 === checkRows.data.length) {
            return layer.msg('请选择要删除的数据', {icon: 2, anim: 6});
        }
        // let ids = checkRows.data.map(function (d) {
        //     return d.id;
        // });
        let ids = ""
        checkRows.data.forEach(function (v, i) {
            ids += v.id+",";
        });
        if(ids.length>0) {
            ids = ids.substr(0, ids.length-1)
        }
        doDel({ids: ids});
    }
});


// 显示编辑弹窗
function showEditModel(mData) {
    admin.open({
        type: 1,
        title: (mData ? '修改' : '添加') + '通讯录',
        maxmin:true,
        closeBtn:1,
        resize: true,
        shade: [0.8, "#393D49"],
        shadeClose:true,
        area:["900px","500px"],
        content: $('#phoneBookEditDialog').html(),
        success: function (layero, dIndex) {
            // 回显表单数据
            form.val('phoneBookEditForm', mData);
            // 表单提交事件
            form.on('submit(phoneBookEditSubmit)', function (data) {
                let loadIndex = layer.load(2);
                admin.req(mData ? 'phoneBook/update' : 'phoneBook/save', data.field, function (res) {
                    layer.close(loadIndex);
                    if (0 === res.code) {
                         layer.close(dIndex);
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2, anim: 6});
                    }
                }, 'post');
                $("button[lay-filter='phoneBookEditSubmit']").attr("disabled","disabled");
                setTimeout(function(){$("button[lay-filter='phoneBookEditSubmit']").removeAttr("disabled");}, 1000 );
                return false;
            });
            laydate.render({
                elem: '#birthday'
                ,calendar: true
                ,mark: {
                    '0-12-31': '跨年' //每年的日期
                    ,'0-0-20': '工资' //每月某天
                    ,'2099-10-14': '呵呵'
                }
                ,done: function(value, date){
                    if(date.date === 20){ //点击2017年8月15日，弹出提示语
                        layer.msg('这一天是：甩手掌柜重要的日子');
                    }
                }
            });
            // 禁止弹窗出现滚动条
            //$(layero).children('.layui-layer-content').css('overflow', 'visible');
        }
    });
}

// 删除
function doDel(obj) {
    if (obj.ids) {  // 批量删除
        admin.confirm('确定要删除选中数据吗？', function (i) {
            layer.close(i);
            let loadIndex = layer.load(2);
            admin.req('phoneBook/remove', {id: obj.ids}, function (res) {
                layer.close(loadIndex);
                if (0 === res.code) {
                    layer.msg(res.msg, {icon: 1});
                    insTb.reload({page: {curr: 1}});
                } else {
                    layer.msg(res.msg, {icon: 2, anim: 6});
                }
            }, 'post');
        });
    } else {  // 单个删除
         let loadIndex = layer.load(2);
         $.get('phoneBook/remove', {id: obj.data.id}, function (res) {
             layer.close(loadIndex);
             if (0 === res.code) {
                 layer.msg(res.msg, {icon: 1});
                 insTb.reload({page: {curr: 1}});
             } else {
                 layer.msg(res.msg, {icon: 2, anim: 6});
             }
         });
     }
}
});
</script>
</body>
</html>
